<template>
  <div class="container">
    <el-row style="height:60px;">
      <el-col :span="12">
        <p class="float-left title">{{lang._181}}
          <span class="large">({{lang._182}})</span>
        </p>
      </el-col>
      <el-col :span="12">
        <el-button type="primary" class="btn float-right" round>{{lang._183}}</el-button>
        <el-button type="text" class="float-right btn">{{lang._184}}</el-button>
      </el-col>
    </el-row>
    <!-- 标题 -->
    <el-row style="height:120px;background:#FFF;">
      <el-col class="margin10">
        <img class="float-left background" src="../../assets/background.png" alt="">
        <p class="remark text-left">* {{lang._185}}：jpg,jpeg,png</p>
        <p class="remark text-left" style="margin-top:7px;">* {{lang._186}}</p>
        <el-upload class="upload-demo" ref="upload" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview"
          :on-remove="handleRemove" :file-list="fileList" :auto-upload="false">
          <el-button slot="trigger" size="small" type="primary">{{lang._187}}</el-button>
          <el-button style="margin-left: 10px;" size="small" type="success" class="float-left" @click="submitUpload">{{lang._188}}</el-button>
        </el-upload>
      </el-col>
    </el-row>
    <!-- 背景图片 -->
    <el-row style="height:60px;">
      <el-col :span="12">
        <p class="float-left title">{{lang._189}}
          <span class="large">({{lang._190}})</span>
        </p>
      </el-col>
      <el-col :span="12">
        <el-button type="primary" class="btn float-right" round>{{lang._183}}</el-button>
        <el-button type="text" class="float-right btn">{{lang._184}}</el-button>
      </el-col>
    </el-row>
    <!-- 标题 -->
    <el-row style="height:152px;background:#FFF;">
      <el-col class="border-bottom" style="height:50px">
        <div style="margin:0 10px;">
          <span class="title1 text-left float-left">{{lang._191}}</span>
          <el-input size="mini" v-model="value" class="input-div float-left"></el-input>
        </div>
      </el-col>
      <el-col style="height:50px" class="border-bottom">
        <div style="margin: 0 10px">
          <span class="title1 float-left">{{lang._192}}</span>
          <el-select size="mini" v-model="value" placeholder="请选择" class="input-div float-left" style="width:195px;">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
      </el-col>
      <el-col style="height:50px" class="border-bottom">
        <div style="margin: 0 10px">
          <span class="title1 float-left">{{lang._193}}</span>
          <el-select size="mini" v-model="value" placeholder="请选择" class="input-div float-left" style="width:195px;">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
      </el-col>
    </el-row>
    <!-- 微店新会员 -->
    <el-row style="height:60px;">
      <el-col :span="12">
        <p class="float-left title">其他设置
        </p>
      </el-col>
      <el-col :span="12">
        <el-button type="primary" class="btn float-right" round>{{lang._183}}</el-button>
        <el-button type="text" class="float-right btn">{{lang._184}}</el-button>
      </el-col>
    </el-row>
    <!-- 标题 -->
    <el-row style="height:509px;background:#FFF;">
      <el-col class="border-bottom" style="height:50px">
        <div style="margin:0 10px;">
          <span class="title1 text-left float-left">{{lang._191}}</span>
          <span class="float-left supplement">{{lang._195}}</span>
          <el-input size="mini" v-model="value" class="input-div float-left"></el-input>
          <span class="float-left supplement">{{lang._196}}</span>
          <el-input size="mini" v-model="value" class="input-div float-left"></el-input>
          <span class="float-left supplement">{{lang._197}}</span>
        </div>
      </el-col>
      <el-col class="border-bottom" style="height:50px">
        <div style="margin:0 10px;">
          <span class="title1 text-left float-left">{{lang._198}}</span>
          <el-input size="mini" v-model="value" class="input-div float-left"></el-input>
          <span class="float-left supplement">.pospal.cn</span>
        </div>
      </el-col>
      <el-col class="border-bottom" style="height:50px">
        <div style="margin:0 10px;">
          <p class="title2 float-left">{{lang._199}}</p>
          <el-switch class="float-right" style="margin-top:15px" v-model="value3" active-text="开" inactive-text="关">
          </el-switch>
        </div>
      </el-col>
      <!-- 副标题 -->
      <el-col class="border-bottom close" style="height:50px">
        <div style="margin:0 10px;">
          <p class="supplement float-left">
            {{lang._200}}
          </p>
          <el-input size="mini" v-model="value" class="input-div float-left"></el-input>
        </div>
      </el-col>
      <el-col class="border-bottom close" style="height:50px">
        <div style="margin:0 10px;">
          <p class="supplement float-left">
            {{lang._201}}
          </p>
          <el-input size="mini" v-model="value" class="input-div float-left"></el-input>
          <p class="supplement float-left">
            {{lang._202}}
          </p>
          <!-- 左边 -->
          <p class="title1 float-right">{{lang._203}}</p>
          <p class="supplement float-right">{{lang._204}}</p>
          <p class="title1 float-right">18</p>
          <p class="supplement float-right">{{lang._205}}</p>

        </div>
      </el-col>
      <el-col class="border-bottom" style="height:50px">
        <div style="margin:0 10px;">
          <p class="title2 float-left">{{lang._206}}</p>
          <el-switch class="float-right" style="margin-top:15px" v-model="value3" active-text="开" inactive-text="关">
          </el-switch>
        </div>
      </el-col>
      <!-- 副标题 -->
      <el-col class="border-bottom" style="height:50px">
        <div style="margin:0 10px;">
          <span class="title1 float-left">{{lang._207}}</span>
          <el-select size="mini" v-model="value" placeholder="请选择" class="input-div float-left" style="width:195px;">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <p class="supplement float-left">{{lang._208}}</p>
          <p class="title1 float-right" style="margin-left:10px;">{{lang._209}}</p>
          <p class="title1 float-right">{{lang._210}}</p>
        </div>
      </el-col>
      <el-col class="border-bottom" style="height:50px">
        <div style="margin:0 10px;">
          <span class="title1 float-left">{{lang._211}}</span>
          <el-select size="mini" v-model="value" placeholder="请选择" class="input-div float-left" style="width:195px;">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <p class="title1 float-right">{{lang._212}}</p>
        </div>
      </el-col>
      <el-col class="border-bottom" style="height:50px">
        <div style="margin:0 10px;">

          <p class="title1 float-right" style="margin-left:10px">{{lang._213}}</p>
          <p class="title1 float-right" style="margin-left:10px">{{lang._214}}</p>
          <p class="float-right supplement">{{lang._215}}</p>
          <el-input size="mini" v-model="value" class="input-div float-right"></el-input>
        </div>
      </el-col>
      <el-col class="border-bottom" style="height:50px">
        <div style="margin:0 10px;">
          <p class="title1 float-left">{{lang._216}}</p>
          <p class="supplement float-left">{{lang._217}}</p>
          <el-switch class="float-right" style="margin-top:15px" v-model="value3" active-text="开" inactive-text="关">
          </el-switch>
        </div>
      </el-col>
      <!-- 其他设置 -->
    </el-row>

  </div>
</template>
<style lang="less" scoped>
  .container {
    width: 922px;
    margin: 20px auto;
    .el-col.margin10 {
      margin: 10px;
    }
    .el-col {
      .background {
        width: 174px;
        height: 100px;
      }
      .remark {
        line-height: 20px;
        color: #323644;
        font-family: "微软雅黑";
        text-indent: 10px;
        font-size: 13px;
        margin: 0;
      }
      .upload-demo {
        margin-top: 15px;
      }
      .title1 {
        font-size: 13px;
        color: #409eff;
        font-family: '微软雅黑';
        line-height: 50px;
        margin: 0;
      }
      .input-div {
        width: 90px;
        margin-top: 10px;
        margin-left: 10px;
      }
      .supplement {
        line-height: 50px;
        margin: 0 10px;
        font-size: 13px;
      }

    }
    .close {
      background: rgba(0, 0, 0, 0.2);
    }
    .border-bottom {
      border-bottom: 1px solid #E4E7ED;
    }
  }

  .title {
    font-size: 30px;
    color: #323644;
    font-family: "微软雅黑";
    margin: 0;
    line-height: 60px;
    height: 60px;
  }

  .large {
    font-family: "微软雅黑";
  }

  .btn {
    margin-top: 15px;
    height: 30px;
    line-height: 30px;
    padding: 0 20px;
  }

</style>
<style>
  .el-col .el-upload {
    float: left;
    margin-left: 10px;
  }

</style>

<script>
  export default {
      props:['lang'],
    data() {
      return {
        fileList: [],
        value3: ''
      };
    },
    methods: {
      submitUpload() {
        this.$refs.upload.submit();
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      }
    }
  }

</script>
